<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="./common/header.jsp"%>
<head>
		<script src="${ctx }/js/copyjs/ZeroClipboard.js" type="text/javascript"></script>
</head>
<body>

<%@ include file="./common/top.jsp"%>
		
		<div class="container" id="mainContainer">
		<form class="form-inline" style="margin-top: 15px;text-align: left;" id="search_form">
		
			<div class="form-group">
	    		<label class="sr-only" for=""></label>
				<input class="form-control" type="text" name="outerid" id="outerid_search_id" style="width:100px;" placeholder="订单号"/>
	  		 </div>
	  		 
			 <div class="form-group"> 
	    		<label class="sr-only" for=""></label>
	    		<input type="text" class="form-control" id="name_search_id" name="name" style="width:70px;" placeholder="收件人"/>
	  		 </div>
	  		 
	  		 <div class="form-group">
	    		<label class="sr-only" for=""></label> 
				<input type="text" class="form-control" id="mobile_search_id" name="mobile" style="width:110px;"  placeholder="手机号码"/>
	  		 </div>
	  		 
	  		 <div class="form-group">
	    		<label class="sr-only" for=""></label>
				<input type="text" class="form-control" id="addr_search_id" name="addr" style="width:120px;"  placeholder="地址"/>
	  		 </div>
	  		 
	  		 <div class="form-group">
	    		<label class="sr-only" for=""></label>
				<input type="text" id="startDate_search_id" name="startDate" class="form-control" style="width:120px;" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})"  placeholder="下单起始时间"/>&nbsp;-&nbsp;
	  		 </div>
	  		 
	  		 <div class="form-group">
	    		<label class="sr-only" for=""></label>
				<input type="text" class="form-control" name="endDate" id="endDate_search_id" style="width:120px;" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" placeholder="下单截止时间"/>
	  		 </div>
	  		 
	  		 <div class="form-group">
	    		<label class="sr-only" for=""></label>
				<input class="form-control" type="text" name="memo" id="memo_search_id" style="width:100px;" placeholder="备忘"/>
	  		 </div>
	  		 
	  		 <div class="form-group">
	    		<label class="sr-only" for=""></label> 
				<input class="form-control" type="text" name="host" id="host_search_id" style="width:120px;" placeholder="订单来源"/>
	  		 </div>
			
			<button type="button"  id="search_id" class="btn btn-primary"><i class="icon-search icon-white"></i>搜索</button>
			<button type="reset"  id="reset" class="btn"> 重置</button>
			
			
			<div style="margin-top:10px;">
				<div class="form-group">
	    			<label class="sr-only" for=""></label>
	    			<select id="status_id"  class="form-control">
					    <option value="-1">所有</option>
						<option value="1">待发货</option>
						<option value="2">已发货</option>
						<option value="3">已完成</option>
						<option value="5">退货/换货</option>
					</select>
	    		</div>
	    		
	    		
					<button type="button"  id="export_id" class="btn btn-primary">导出excel</button>
					<button type="button"  id="export_sf_id" class="btn btn-primary">顺丰格式excel</button>
					<a  href="${ctx }/admin/order/orderHtml/-1" id="send_huo_id" target="_blank" class="btn btn-primary">打开发货格式</a>
			</div>
			

		</form>
		
	
		
		 
		
		<ul id="myTab" class="nav nav-tabs" style="margin-top:40px;">
              <li class="active"><a href="#processed_order"  id="processed_tab_a" class="tab-order"  data-tab="processed"  data-toggle="tab">已处理(<span id="processed_count"></span>)</a></li>
			  
              <li class=""><a href="#sended_order"  id="sended_tab_a" class="tab-order"  data-tab="sended"  data-toggle="tab">已发货(<span id="sended_count"></span>)</a></li>

              <li class=""><a href="#question_order"  id="question_tab_a"  class="tab-order"  data-tab="question"  data-toggle="tab">已完成(<span id="question_count"></span>)</a></li>

              <li class=""><a href="#huanhuo_order"  id="huanhuo_tab_a"  class="tab-order"  data-tab="huanhuo"  data-toggle="tab">退货/退款(<span id="huanhuo_count"></span>)</a></li>
        </ul>
        
        <div id="myTabContent" class="tab-content">
        	<!-- begin已处理 -->
	         <div class="tab-pane fade active in" id="processed_order">
	                <table id="processed_data_table_id">
						
					</table>
	          </div>
	          <!-- end已处理 -->
	          

	          <!-- begin已发货 -->
	         <div class="tab-pane fade" id="sended_order">
	                <table id="sended_data_table_id">
						
					</table>
	          </div>
	          <!-- end已发货 -->
	          
	          <!-- begin已完成 -->
	         <div class="tab-pane fade" id="question_order">
	                <table id="question_data_table_id">
						
					</table>
	          </div>
	          <!-- end已完成 -->

	          <!-- begin退款/退货 -->
	         <div class="tab-pane fade" id="huanhuo_order">
	                <table id="huanhuo_data_table_id">
						
					</table>
	          </div>
	          <!-- end退款/退货 -->
	          

     </div>
     
     <div style="margin-top:50px;"></div>
		
	</div>
	
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title" id="myModalLabel">确认发货</h4>
	      </div>
	      <div class="modal-body">
	        <form role="form" id="ship_form_id">
	          <input type="hidden" name="id" id="order_id"/>
			  <div class="form-group">
			    <label for="">物流公司名称：</label>
			     <select class="form-control"   name="expressName">
			    	<option value="顺丰快递">顺丰快递</option>
			    	<option value="圆通快递">圆通快递</option>
			    	<option value="中通快递">中通快递</option>
			    	<option value="韵达快递">韵达快递</option>
			    	<option value="申通快递">申通快递</option>
			    	<option value="百世快递">百世快递</option>
			    </select>
			  </div>
			  
			  <div class="form-group">
			    <label for="">物流发货单号：</label>
			    <input type="text" class="form-control" name="expressNo" placeholder="">
			  </div>
			  
			  <div class="form-group">
			    <label for="">物流运输类型：</label>
			    <select class="form-control"  id="express_type_id">
			    	<option value="0">快递</option>
			    	<option value="1">平邮</option>
			    	<option value="2">EMS</option>
			    </select>
			  </div>
			  
			   <div class="form-group">
			    <label for="">备注：</label>
			    <input type="text" class="form-control" name="memo" placeholder="">
			  </div>
			  
			  <button type="buttom" id="ship_btn" class="btn btn-primary">确认发货</button>
		      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</form>
	      </div>
	     
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<!-- begin 操作按钮模板 -->
	<div id="oper_model" style="display: none;">
		<a  class="process-a memo-a remark" href="#"  title="备忘" style="">备忘</a>
		<a  class="process-a  ship for-status-1" href="#" data-status="2" title="发货" style="display: none;color:green;">发货</a>
		<a  class="process-a memo-a for-status-2" href="#" data-status="3" title="确认收货" style="display: none;color:green;">确认收货</a>
		<a  class="process-a memo-a for-status-3" href="#" data-status="5" title="退货/退款" style="display: none;color:green;">退货/退款</a>
	</div>
	
	

	<script>
		$(function() {
			//标记目前tab页，用于搜索
			var currTab = "processed";
			//存储tab表格数据对象
			var grid = [];

			var timer;
			
			function drawTabGrid(tabName,status){
					grid[tabName]  = new jWei.Datagrid({
					renderTo : $("#"+tabName+"_data_table_id"),
					tabWidth:"",
					limit:10,
					showCols:false,
					fieldset:false,
					legendTitle:"",
					pageHandler:function(){
					},
					url : "${ctx}/admin/order/list.do?status="+status,
					colModels : [ 
		         	{
						name : "updateDate",
						displayName : "下单时间",
					},
					
					{
						name : "order_outerid",
						displayName : "订单号",
					},
					
					{
						name : "order_host",
						displayName : "来源",
					},
					
					{
						name : "",
						displayName : "商品信息",
						handler:function(v,data,td,tr){
							
							if(data.goodsList.length>0){
								var html = '<div style="font-size:11px;width:100px;">';
								//手机不设置宽度
								if(jWei.util.isMobile()){
									html = '<div style="font-size:11px;">';
								}
								
								for(var i =0;i<data.goodsList.length;i++){
									var cartVO = data.goodsList[i];
									if(cartVO && cartVO.goods){
										html = html + '<a target="_blank" href="${ctx}/detailGoods/'+cartVO.goods.id+'">'+cartVO.goods.title+"</a>&nbsp;×"+cartVO.num+"，颜色："+cartVO.color+"，尺码："+cartVO.size+"</br>";
									}
								}
								html = html + '</div>';
								td.html(html);
							}
							else if(data.order.info){
								td.html(data.order.info);
							}else{
								td.html("");
							}
							
						}
					},
					
					{
						name : "order_mobile",
						displayName : "手机",
						handler:function(v,data,td,tr){
							if('${user.status}' == 1){
								td.html(v);
							}else{
								
								td.html('*****');
							}
						}
					}, 
					
					{
						name : "order_name",
						displayName : "收货人"
						
					}, 
					
					{
						name : "order_addr",
						displayName : "地址",
						width:"100px",
						handler:function(v,data,td,tr){
							if('${user.status}' == 1){
								td.html(v);
							}else{
								
								td.html('*****');
							}
						}
					}, 
					
					{
						name : "order_totalPrice",
						displayName : "总价格",
						handler:function(v,data,td,tr){
							td.html("￥"+v);
						}
					},
					
					{
						name : "order_remark",
						displayName : "附言"
					},
					
					{
						name : "order_expressNo",
						displayName : "快递单号"
					},
					
					{
					name:"order_tradeStatus",
					displayName : "操作",
					width:"200px",
					handler:function(v,data,td,tr){
						var html = '<textarea placeholder="右下角可拖动大小"  class="memo-input" style="height:26px;width:200px;">'+data.order.memo+'</textarea>';
						html = html+$("#oper_model").html();
						html = html+'<a target="_blank" href="./editOrder.jsp?id='+data.order.id+'"  title="修改">修改</a>'; 
						td.html(html);
						var typeName = "";
						for(var i =0;i<data.goodsList.length;i++){
							var cartVO = data.goodsList[i];
							if(cartVO && cartVO.goods){
								var brandsId = cartVO.goods.brandsId;
								if(brandsId ==1){
									typeName =  typeName + "耐克";
								}else if(brandsId ==2){
									typeName =  typeName + "阿迪";
								}else if(brandsId == 3){
									typeName =  typeName + "新百伦";
								}else if(brandsId == 4){
									typeName =  typeName + "斯凯奇";
								}else if(brandsId == 5){
									typeName =  typeName + "万斯";
								}else if(brandsId == 6){
									typeName =  typeName + "彪马";
								}else if(brandsId == 7){
									typeName =  typeName + "耐克乔丹";
								}else{
									typeName =  typeName + "运动鞋";
								}
								typeName = typeName + cartVO.size +"码"+cartVO.color;
							}
							typeName = typeName + "和";
						}

						//根据状态显示相应的操作按钮
						td.find(".for-status-"+status).each(function(){
							$(this).show();
						});
						//为按钮绑定订单id
						td.find(".process-a").each(function(){
							$(this).attr("data-id",data.order.id);
							$(this).attr("data-tab",tabName);
						});
						//为备忘按钮绑定当前状态
						td.find(".remark").attr("data-status",status);
						
					}
				}
				]
				});
				
				$("#"+tabName+"_count").html(grid[tabName].totalCount);
			}

			//绘制待发货表格
			drawTabGrid("processed",1);

			//绘制已发货表格
			drawTabGrid("sended",2);

			//绘制已完成表格
			drawTabGrid("question",3);
			//绘制已取消表格
			//绘制退货/退款
			drawTabGrid("huanhuo",5);

			 
			//为操作按钮绑定处理事件
			$("#myTabContent").on("click",".memo-a",function(){
				var memo = $(this).parent().find(".memo-input").val();
				var id = $(this).data("id");
				var status = $(this).data("status");
				jQuery
				.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : '../admin/order/memo.do',
					async:false,
					data : {
						id : id,
						status:status,
						memo:memo
					},
					dataType : 'json',
					success : function(
							data) {
						if (data.result) {
							//init(pagenumber);
							window.top.jWei.Tips.success("操作成功！");
							
							var tabName = $("#myTab li.active").find("a").data("tab");
							grid[tabName].reload();
							$("#"+tabName+"_count").html(grid[tabName].totalCount);
							//刷新所有表格
							relodAllTab();
						} else {
							alert(data.errorMsg);
						}
					},
					error : function(data) {
						
					}
				});
				return false;
			});
			//发货绑定事件
			$("#myTabContent").on("click",".ship",function(){
				var id = $(this).data("id");
				$('#myModal form').find(":text").each(function(){
					$(this).val("");
				});
				$("#myModal #express_type_id").val(0);
				//赋值订单id
				$("#myModal #order_id").val(id);
				$('#myModal').modal();
				return false;
			});
			
			//确认发货
			$("#ship_btn").click(function(){
				
				var formData = $('#ship_form_id').serialize();
				jQuery.ajax( {
					type : 'POST',
					url : '${ctx}/admin/order/ship.do',
					dataType : 'json',
					data : formData,
					success : function(obj) {
						if(obj.result){
							window.top.jWei.Tips.success("操作成功！");
							var tabName = $("#myTab li.active").find("a").data("tab");
							grid[tabName].reload();
							$("#"+tabName+"_count").html(grid[tabName].totalCount);
							//刷新所有表格
							relodAllTab();
						}else{
							jWei.Tips.error(obj.errorMsg);
						}
						$("#mainContainer").hideLoading();
					},
					error : function() {
						window.top.jWei.Tips.error("数据库异常！");
					}
				});
				
				$('#myModal').modal('hide');
				return false;
			});
			
			//搜索按钮事件
			$("#search_id").click(function(){
				grid[currTab].search("search_form");
				$("#"+currTab+"_count").html(grid[currTab].totalCount);
				return false;
			});
			
			//点击tab页面刷新当前表格
			$(".tab-order").click(function(){
				var tableName = $(this).data("tab");
				//标记当前tab
				currTab = tableName;
				//重置搜索表单并重新搜索
				$("#search_id").trigger("click");

			});
			
			function relodAllTab(){
				//重新刷新所有表格
				for(var item in grid){
					grid[item].reload();
					$("#"+item+"_count").html(grid[item].totalCount);
				}
			}
			
			//导出数据功能
			$("#export_id").click(function(){
				var param = "title ="+$("#title_search_id").val()+
				"&memo="+$("#memo_search_id").val()+
				"&name="+$("#name_search_id").val()+
				"&mobile="+$("#mobile_search_id").val()+
				"&addr="+$("#addr_search_id").val()+
				"&startDate="+$("#startDate_search_id").val()+
				"&endDate="+$("#endDate_search_id").val()+
				"&status="+$("#status_id").val();
				window.location = '../admin/order/export.do?'+param;
			});  
			
			//顺丰格式
			$("#export_sf_id").click(function(){
				var param = "title ="+$("#title_search_id").val()+
				"&memo="+$("#memo_search_id").val()+
				"&name="+$("#name_search_id").val()+
				"&mobile="+$("#mobile_search_id").val()+
				"&addr="+$("#addr_search_id").val()+
				"&startDate="+$("#startDate_search_id").val()+
				"&endDate="+$("#endDate_search_id").val()+
				"&status="+$("#status_id").val();
				window.location = '../admin/order/exportSF.do?'+param;
			});  
			
			$("#status_id").change(function(){
				var val = $(this).val();
				$("#send_huo_id").attr("href","${ctx}/admin/order/orderHtml/"+val);
				return false;
			});
			
			//绑定批量发货
			$("#batch_send").click(function(){
				var wuLiuIds = "";
				$("#processed1_order_form").find(".wuliu-id").each(function(){
					if($(this).val()){
						var id = $(this).data("id");
						var val = $(this).val();
						var pingjie = id+"-"+val;
						wuLiuIds = wuLiuIds+pingjie+",";
					}
				});
				
				if(!wuLiuIds){
					alert("没有填写任何运单号！");
					return false;
				}else{
					wuLiuIds = wuLiuIds.substring(0,wuLiuIds.length-1);
				}
				jQuery.ajax( {
					type : 'POST',
					url : '${ctx}/admin/order/batchShip.do',
					dataType : 'json',
					data : {
						wuLiuIds:wuLiuIds
					},
					success : function(obj) {
						if(obj.result){
							window.top.jWei.Tips.success("操作成功！");
							var tabName = $("#myTab li.active").find("a").data("tab");
							grid[tabName].reload();
							$("#"+tabName+"_count").html(grid[tabName].totalCount);
							//刷新所有表格
							//relodAllTab();
						}else{
							jWei.Tips.error(obj.errorMsg);
						}
						$("#mainContainer").hideLoading();
					},
					error : function() {
						window.top.jWei.Tips.error("数据库异常！");
					}
				});
				return false;
			});
			
			
			
		});
	</script>

</body>
</html>